<template>
  <div class="app-content">
    <div class="h-100 flex flex-col">
      <van-nav-bar :title="courseTypeMap[$route.params.type]" @click-left="$router.go(-1);" class="app-van-nav-bar">
        <x-svg-icon slot="left" name="arrow_back" />
      </van-nav-bar>
      <x-app-course-list class="overflow course-list" :loading.sync="isLoading" :refreshLoading.sync="refreshLoading" :finished="finished" :list="list" @load="getList">
        <template #header>
          <div class="course-list-header flex-b-c">
            <x-app-sort-item label="学习人数" v-model="searchForm.learningCountOrder" @change="getList(1)" />
            <x-app-sort-item label="评论数" v-model="searchForm.commentCountOrder" @change="getList(1)" />
            <x-app-sort-item label="添加时间" v-model="searchForm.createOrder" @change="getList(1)" />
          </div>
        </template>
      </x-app-course-list>
    </div>
  </div>
</template>

<script>
export default {
  name: 'appCourse',
  data() {
    return {
      searchForm: {
        currentPage: 1,
        pageSize: 9,
      },
      isLoading: false,
      refreshLoading: false,
      finished: false,
      list: [],
      total: 0,
      courseTypeMap: {
        ZCJD: "政策解读", HYZS: "行业知识", JNPX: "技能培训", RWSK: "人文社科",
        TZLC: "投资理财", YDJK: "运动健康", SHBK: "生活百科", OTHER: "其它课程",
      },
    };
  },
  methods: {
    async getList (page, sort) {
      this.isLoading = true
      if (sort) {
        delete this.searchForm.learningCountOrder
        delete this.searchForm.commentCountOrder
        delete this.searchForm.createOrder
      }
      if (page === 1) {
        this.finished = false;
        this.searchForm.currentPage = 1;
        this.list = []
      };
      this.searchForm.courseType = this.$route.params.type;
      const { data, total } = await this.Request.getCourseInfoPage({ params: this.searchForm })
      this.list.push(...data);
      this.total = total;
      if(this.list.length >= total) this.finished = true;
      this.searchForm.currentPage++;
      this.isLoading = false;
      this.refreshLoading = false;
    },
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.course-list-header {
  padding: 16px;
  .x-app-sort-item {
    flex: 1;
    border-right: 1px solid #ccc;
    &:last-child {
      border-right: none;
    }
  }
}
/deep/.course-list {
  .van-list {
    padding-top: 0;
  }
}
</style>
